<template>
  <!-- 组件5：栏目的子栏目标签页切换显示组件 -->
  <div class="cms-category-container">
    <a-list size="small" :bordered="false" :split="false" :data-source="articles">
      <!-- 栏目信息 -->
      <template #header>
        <div class="category-title">
          <!-- 栏目前图标 -->
          <div class="category-title-prefix"> <img /> </div>
          <!-- 栏目名称 -->
          <div class="category-title-text" style="font-family: 'Microsoft YaHei'">{{
            category.name
          }}</div>
          <!-- 显示更多 -->
          <div class="category-title-more cursor-pointer" @click="onClickToCategory(category)"
            >更多>></div
          >
        </div>

        <div style="height: 1px; width: 100%">
          <a-divider style="border-color: #ccc; height: 1px"
        /></div>

        <!-- 子栏目标签页 -->
        <div>
          <Tabs tabPosition="top">
            <template v-for="item in childs" :key="item.category.id">
              <TabPane :tab="item.category.name">
                <!-- 栏目文章列表组件 -->
                <CmsCategoryTopNArticles
                  :category="item.category"
                  :articles="item.articles"
                  :isShow="false"
                />
              </TabPane>
            </template>
          </Tabs>
        </div>
      </template>
    </a-list>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';

  import { useGlobSetting } from '/@/hooks/setting';
  import { Tabs } from 'ant-design-vue';

  import CmsCategoryTopNArticles from './CmsCategoryTopNArticles.vue';
  import { getCategory } from '/@/api/cms/category';

  import { useGo } from '/@/hooks/web/usePage';
  import { useCmsStore } from '/@/store/modules/cms';

  export default defineComponent({
    name: 'CmsCategoryChildTabs',
    components: { Tabs, TabPane: Tabs.TabPane, CmsCategoryTopNArticles },
    props: {
      category: {},
      articles: {},
      childs: {},
    },
    setup(props) {
      // console.log('CmsCategoryChildTabs.vue get props articles', props.articles);
      // console.log('CmsCategoryChildTabs.vue get props category', props.category);
      // console.log('CmsCategoryChildTabs.vue get props childs', props.childs);

      const go = useGo();
      //使用store必须在setup中，否则会报错
      const cmsStore = useCmsStore();

      const { globalProjectCode } = useGlobSetting();
      const projectCode = ref<String>(globalProjectCode);

      function onClickToCategory(category) {
        console.log('栏目id', category.id);
        //根据栏目id获取栏目
        getCategory(category.id)
          .then((res) => {
            // console.log('指定栏目', res);

            //如果栏目没有内容或内容为空，根据栏目ID进行跳转到栏目查看的路由
            //如果栏目内容不为空，判断为url或路由；如果以http或https开头表示为外部地址，
            //    使用新窗口打开；否则在当前窗口中进行路由跳转
            let categoryContent = res.content;
            if (!categoryContent || Object.keys(categoryContent).length == 0) {
              //使用store存储跳转路由需传递的数据
              cmsStore.setCmsRouteParam({
                isArticle: false,
                id: category.id,
              });

              //把首页也当做1个栏目，均使用栏目页面进行展示
              //后台可以在栏目中设置信息，前端根据设置信息显示
              //设置信息包含:每个栏目：是否在父栏目中列出文章、在父栏目中是显示文章列表还是显示文章提要、在父栏目中的显示顺序、在父栏目中的显示宽度n/24
              go('/cms/category/' + category.id);
            } else {
              let httpPrefixIndex = categoryContent.indexOf('http');
              if (httpPrefixIndex > -1) {
                //打开外部链接，链接地址为栏目的content
                // window.open('https://www.baidu.com/s?wd=' + clickCategory.id);`
                window.open(categoryContent);
              } else {
                //使用content作为路由进行跳转
                go(categoryContent);
              }
            }
          })
          .catch((ex) => {
            console.log('catch ', ex);
          });
      }

      return {
        projectCode,
        props,
        onClickToCategory,
      };
    },
  });
</script>
<style scoped lang="less">
  @import './cms.less';

  //Tab标签样式覆盖
  .ant-tabs:deep(.ant-tabs-ink-bar) {
    background-color: @cms-category-bg-color;
  }

  // .ant-tabs:deep(.ant-tabs-tab) {
  //   // padding-top: 3px;
  //   // padding-bottom: 0;
  // }

  .ant-tabs:deep(.ant-tabs-tab-btn) {
    font-weight: bolder;
    font-size: 0.9rem;
  }

  .ant-tabs:deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: @cms-category-bg-color;
  }
</style>
